<template>
  <bList :list="pDetail.list" :instance="pDetail">
    <template #default="{ data }">
      <bDetail :style="data.isSelf ? 'border: 1px solid var(--el-color-primary)' : ''
        " :data="data" :instance="pForm"></bDetail>
    </template>
  </bList>
  <div ref="last" class="blank"></div>
  <bForm v-if="pForm.show" class="form" :data="pForm.data" :instance="pForm" cover="55%">
    <el-button @click="onUpdate" type="primary">完成</el-button>
    <el-button @click="router.back()">返回</el-button>
  </bForm>
</template>
<script lang="ts" setup>
import bList from "@/components/public/b_list.vue";
import bDetail from "@/components/public/b_detail.vue";
import bForm from "@/components/public/b_form.vue";
import { useTemplateRef, nextTick } from "vue";
import { SuggestDetail, SuggestForm } from "@b/index/suggest";
import { useRoute, useRouter } from "vue-router";
import { NotiStore } from "@b/model/store/notification";
import { ElButton } from "element-plus";

const pDetail = new SuggestDetail();
const pForm = new SuggestForm();
const router = useRouter();
const lastRef = useTemplateRef<HTMLElement>("last");
pDetail.url.page = "/v1/suggest/suggestInfo";
delete pForm.labels.title;
const id = useRoute().query.id as string;
pDetail.search_key.id = id;
pForm.data.SuggestId = Number(id);

pDetail.aftergetPage = () => {
  pDetail.has_next = false
  lastRef.value?.scrollIntoView(true);
};

const onUpdate = async () => {
  const res = await pForm.updateData();
  if (res) {
    pDetail.refresh(0)
    new NotiStore().getAdminSuggest();
    pForm.data = { SuggestId: Number(id) };
    pForm.show = false
    nextTick(() => {
      pForm.show = true
    })
  }
};
</script>
<style scoped>
.form :deep(.el-image) {
  width: 60px !important;
  height: 60px !important;
}

.edit {
  position: absolute;
  top: 20px;
  right: 20px;
}
</style>
